<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/5/20
  Time: 10:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>关于我们 --> 做一个孤独的旅行者，发现存在的意义</title>
    <link href="/client/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="/client/css/style.css" type="text/css" rel="stylesheet">
    <link type="text/css" href="/client/css/nprogress.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="/client/js/html5shiv.min.js" type="text/javascript"></script>
    <script src="/client/js/respond.min.js" type="text/javascript"></script>
    <script src="/client/js/selectivizr-min.js" type="text/javascript"></script>
    <![endif]-->

    <link rel="shortcut icon" href="/client/images/tou.ico">
    <meta name="Keywords" content="" />
    <meta name="description" content="" />
    <script type="text/javascript">
        //判断浏览器是否支持HTML5
        window.onload = function() {
            if (!window.applicationCache) {
                window.location.href="/client/ie.html";
            }
        }
    </script>
    <script type="application/javascript">
        function add() {

            var formDate = $("#comment-form").serialize();

            $.ajax({
                url:"/comments/addComment.do",
                type:"post",
                data:formDate,
                dataType:"json",
                success:function (data) {
                    var obj = eval(data);
                    var str1="";
                    $(obj).each(function (i) {
                        var time = getLocalTime(data[i].ctime);
                        str1 += '<li><input type="hidden" name="cid" value="' + data[i].id + '"/><span class="text"><strong>' + data[i].user.username + '</strong> (' + time + ') 留言：<br />' + data[i].cpage + '</span></li>';

                    });
                    $("#showPorducts").html(str1);
                    /*原内容清空*/
                    $("#cpage").val("");
                }
            })
        }

    </script>
    <script type="application/javascript">
        function getLocalTime(nS) {
            //将时间戳（十三位时间搓，也就是带毫秒的时间搓）转换成时间格式
            // d.cTime = 1539083829787
            let date = new Date(nS);
            let year = date.getFullYear();
            let month = date.getMonth()+1;
            let day = date.getDate();
            month = month < 10 ? "0"+month:month;
            day = day < 10 ? "0"+day:day;
            date = year+'-'+month+'-'+day;
            console.log(date); // 2018-10-09
            return date;
        }
    </script>
</head>

<body>
<section class="container user-select">
<jsp:include page="head.jsp"/>
    <!--/超小屏幕可见-->
    <div class="content-wrap"><!--内容-->
        <div class="content">
            <div class="content-block about-content">
                <h2 class="title"><strong>关于技术博客</strong></h2>
                <p class="line-title">想要深入了解<span>技术博客？</span></p>
                <p>个人技术博客的		内容大概为网站前端和后端的技术，包括内容管理系统，文章内容有我自己的原创，也有其他网站转载过来的精品，如果我遇到好的资源会第一时间发布在本博客内。</p>
                <p>大家如果有好的文章好的技术请不要吝啬，欢迎前来投稿！</p>
                <p>如果有什么疑问或者需要投稿的请使用下方联系方式，或者留言来告诉我，收到后第一时间回复。</p>
            </div>
            <div class="content-block contact-content">
                <h2 class="title"><strong>联系技术博客</strong></h2>
                <p><span>站长QQ：</span><a href="tencent://message/?uin=0000000000\">000 000 00000</a></p>
                <p><span>交流群：</span><a href="">00000000</a></p>
                <p><span>站长信箱：</span><a href="mailto:admin@xxxx.com">admin@xxxx.com</a></p>
            </div>
            <div class="content-block comment">
                <h2 class="title"><strong>添加评论</strong></h2>
                <form action="/comments/addComment.do" method="post" class="form-inline" id="comment-form">
                    <div class="comment-title">
                        <%--<div class="form-group">--%>
                            <%--<label for="messageName">姓名：</label>--%>
                            <%--<input type="text" name="messageName" class="form-control" id="messageName" placeholder="技术博客">--%>
                        <%--</div>--%>
                        <%--<div class="form-group">--%>
                            <%--<label for="messageEmail">邮箱：</label>--%>
                            <%--<input type="email" name="messageEmail" class="form-control" id="messageEmail" placeholder="admin@xxxx.com">--%>
                        <%--</div>--%>
                    </div>
                    <div class="comment-form">
                        <div class="comment-form-footer">
                            <c:choose>
                            <c:when test="${empty user}">
                                <textarea placeholder="请先登录或者注册" name="messageContent"></textarea>
                                <div class="comment-form-text">请先 <a href="/client/login.jsp">登录</a> 或 <a href="/client/regist.jsp">注册</a></div>
                            </c:when>
                                <c:otherwise>
                                    <textarea placeholder="在此处添加留言" name="cpage" id="cpage"></textarea>
                                    <div class="comment-form-btn">
                                        <button type="button" class="btn btn-default btn-comment" onclick="add()" >提交留言</button>
                                    </div>
                                </c:otherwise>
                            </c:choose>
                        </div>
                    </div>
                </form>
                <div class="content-block comment-content">
                    <h2 class="title"><strong>最新评论</strong></h2>
                    <ul id="showPorducts">
                        <c:forEach items="${commentsList}" var="co">
                            <li>
                                <input type="hidden" name="cid" value="${co.cid}"/>
                                <span class="text"><strong>${co.user.username}</strong> (<fmt:formatDate value="${co.ctime}" pattern="yyyy-MM-dd"/>) 留言：<br />
                                    ${co.cpage}
                                </span>
                            </li>
                        </c:forEach>

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--/内容-->
    <aside class="sidebar visible-lg"><!--右侧>992px显示-->
    <jsp:include page="/client/user.jsp"/>
        <div class="sentence"> <strong>每日一句</strong>
            <h2 id="time"></h2>
            <p>你是我人生中唯一的主角，我却只能是你故事中的一晃而过得路人甲。</p>
        </div>
        <jsp:include page="/client/menu_search.jsp"/>
        <jsp:include page="/client/commands.jsp"/>
        <div class="sidebar-block comment">
            <h2 class="title"><strong>最新评论</strong></h2>
            <ul>
                <c:forEach items="${commentssList}" var="com">
                    <li data-toggle="tooltip" data-placement="top" title="${com.user.username}的评论">
                        <a>
                        <span class="face">
                            <img src="/client/images/icon/icon.png" alt="">
                        </span>
                            <span class="text"><strong>${com.user.username}</strong> (<fmt:formatDate value="${com.ctime}" pattern="yyyy-MM-dd"/>) 说：<br />
                            ${com.cpage}
                        </span>
                        </a>
                    </li>
                </c:forEach>
            </ul>
        </div>
    </aside>
    <!--/右侧>992px显示-->
    <footer class="footer">POWERED BY &copy;<a href="#">技术博客 XXXXX.COM</a> ALL RIGHTS RESERVED &nbsp;&nbsp;&nbsp;<span>
        <a href="http://www.mycodes.net/" target="_blank">源码之家</a>
    </span>
        <span style="display:none"><a href="">网站统计</a></span>
    </footer>
</section>
<div><a href="javascript:;" class="gotop" style="display:none;"></a></div>
<!--/返回顶部-->
<script src="/client/js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="/client/js/nprogress.js" type="text/javascript" ></script>
<script src="/client/js/bootstrap.min.js" type="text/javascript"></script>
<script type="application/javascript">
    $(function() {
        var myDate = new Date;
        var year = myDate.getFullYear(); //获取当前年
        var mon = myDate.getMonth() + 1; //获取当前月
        var date = myDate.getDate(); //获取当前日
        // var h = myDate.getHours();//获取当前小时数(0-23)
        // var m = myDate.getMinutes();//获取当前分钟数(0-59)
        // var s = myDate.getSeconds();//获取当前秒
        var week = myDate.getDay();
        var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        console.log(year, mon, date, weeks[week])
        $("#time").html(year + "年" + mon + "月" + date + "日" + weeks[week]);
    })
</script>
<script type="text/javascript">
    //页面加载
    $('body').show();
    $('.version').text(NProgress.version);
    NProgress.start();
    setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
    //返回顶部按钮
    $(function(){
        $(window).scroll(function(){
            if($(window).scrollTop()>100){
                $(".gotop").fadeIn();
            }
            else{
                $(".gotop").hide();
            }
        });
        $(".gotop").click(function(){
            $('html,body').animate({'scrollTop':0},500);
        });
    });
    //提示插件启用
    $(function () {
        $('[data-toggle="popover"]').popover();
    });
    $(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });
    //鼠标滑过显示 滑离隐藏
    $(function(){
        $(".carousel").hover(function(){
            $(this).find(".carousel-control").show();
        },function(){
            $(this).find(".carousel-control").hide();
        });
    });
    $(function(){
        $(".hot-content ul li").hover(function(){
            $(this).find("h3").show();
        },function(){
            $(this).find("h3").hide();
        });
    });
    //页面元素智能定位
    $.fn.smartFloat = function() {
        var position = function(element) {
            var top = element.position().top; //当前元素对象element距离浏览器上边缘的距离
            var pos = element.css("position"); //当前元素距离页面document顶部的距离
            $(window).scroll(function() { //侦听滚动时
                var scrolls = $(this).scrollTop();
                if (scrolls > top) { //如果滚动到页面超出了当前元素element的相对页面顶部的高度
                    if (window.XMLHttpRequest) { //如果不是ie6
                        element.css({ //设置css
                            position: "fixed", //固定定位,即不再跟随滚动
                            top: 0 //距离页面顶部为0
                        }).addClass("shadow"); //加上阴影样式.shadow
                    } else { //如果是ie6
                        element.css({
                            top: scrolls  //与页面顶部距离
                        });
                    }
                }else {
                    element.css({ //如果当前元素element未滚动到浏览器上边缘，则使用默认样式
                        position: pos,
                        top: top
                    }).removeClass("shadow");//移除阴影样式.shadow
                }
            });
        };
        return $(this).each(function() {
            position($(this));
        });
    };
    //启用页面元素智能定位
    $(function(){
        $("#search").smartFloat();
    });
    //异步加载更多内容
    jQuery("#pagination a").on("click", function ()
    {
        var _url = jQuery(this).attr("href");
        var _text = jQuery(this).text();
        jQuery(this).attr("href", "javascript:void(0);");
        jQuery.ajax(
            {
                type : "POST",
                url : _url,
                success : function (data)
                {
                    //将返回的数据进行处理，挑选出class是news-list的内容块
                    result = jQuery(data).find(".row .news-list");
                    //newHref获取返回的内容中的下一页的链接地址
                    nextHref = jQuery(data).find("#pagination a").attr("href");
                    jQuery(this).attr("href", _url);
                    if (nextHref != undefined)
                    {
                        jQuery("#pagination a").attr("href", nextHref);
                    }
                    else
                    {
                        jQuery("#pagination a").html("下一页没有了").removeAttr("href")
                    }
                    // 渐显新内容
                    jQuery(function ()
                    {
                        jQuery(".row").append(result.fadeIn(300));
                        jQuery("img").lazyload(
                            {
                                effect : "fadeIn"
                            });
                    });
                }
            });
        return false;
    });
</script>
</body>
</html>
